<template>
  <div class="di-1">
    <div class="img-12"></div>
    <div class="text-12">服务器压力</div>
    <!-- 这里写你的内容 -->
    <div class="d1-1" v-for="(item, index) in suns" :key="index">
      {{ item.name }}:<span class="sps-1">{{ item.value }}</span>
    </div>

    <div class="d1-1">
      PPT分析日期:<span class="sps-1">{{ sun1 }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getPPTData, getPPTData1 } from '@/services/index'
import { ref, onMounted } from 'vue'
type PPtData1 = {
  name: string
  value: number
}
const sun1 = ref()
const suns = ref<PPtData1[]>([])
const sun = async () => {
  const res = await getPPTData()
  sun1.value = res.data
}
const sun2 = async () => {
  const res = await getPPTData1()
  suns.value = res.data
}
onMounted(() => {
  sun()
  sun2()
})
</script>

<style lang="scss" scoped>
.di-1 {
  width: 240px;
  height: 420px;
  background-image: url('../../assets/img/z-1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 10px;
  .img-12 {
    width: 100%;
    height: 20px;
    background-image: url('../../assets/img/t-1.gif');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 10px;
  }
  .text-12 {
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-family: 'Microsoft Yahei', Arial, 'sans-serif';
    font-size: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .d1-1 {
    color: rgb(255, 255, 255);
    font-weight: lighter;
    font-family: 'Microsoft Yahei', Arial, 'sans-serif';
    font-size: 20px;
    margin: 10px 0;
    .sps-1 {
      margin-left: 10px;
      font-size: 25px;
      font-weight: bolder;
      color: #51e70b;
    }
  }
}
</style>
